import { createApp } from 'vue'
import App from './App.vue'

import VMdPreview from '@kangc/v-md-editor/lib/preview'
import '@kangc/v-md-editor/lib/style/preview.css'

// tip
import createTipPlugin from '@kangc/v-md-editor/lib/plugins/tip/index'
import '@kangc/v-md-editor/lib/plugins/tip/tip.css'

// emoji
import createEmojiPlugin from '@/components/emoji/index'
import mdEmojiPlugin from 'markdown-it-emoji/bare'
import emojiJson from '@/components/emoji/emoji.json'

// katex
// import createKatexPlugin from '@kangc/v-md-editor/lib/plugins/katex/npm'
import createKatexPlugin from '@kangc/v-md-editor/lib/plugins/katex/cdn'
// import 'katex/dist/katex.min.css'

// mermaid
// import createMermaidPlugin from '@kangc/v-md-editor/lib/plugins/mermaid/npm'
import createMermaidPlugin from '@kangc/v-md-editor/lib/plugins/mermaid/cdn'
import '@kangc/v-md-editor/lib/plugins/mermaid/mermaid.css'

// todo-list
import createTodoListPlugin from '@kangc/v-md-editor/lib/plugins/todo-list/index'
import '@kangc/v-md-editor/lib/plugins/todo-list/todo-list.css'

// align
import createAlignPlugin from '@kangc/v-md-editor/lib/plugins/align'

// highlightjs
import createHljsTheme from '@kangc/v-md-editor/lib/theme/hljs'
import hljs from 'highlight.js'
import type MarkdownIt from 'markdown-it'

const hljsTheme = createHljsTheme({
  Hljs: hljs
})
// eslint-disable-next-line @typescript-eslint/no-unused-vars
hljsTheme.extend((md: MarkdownIt) => {
  // 设置自定义表情
  mdEmojiPlugin(md, {
    defs: emojiJson
  })
  // md为 markdown-it 实例，可以在此处进行修改配置,并使用 plugin 进行语法扩展
  // md.set(option).use(plugin);
})
VMdPreview.vMdParser.theme(hljsTheme)
VMdPreview.use(createTipPlugin())
VMdPreview.use(createEmojiPlugin())
VMdPreview.use(createKatexPlugin())
VMdPreview.use(createMermaidPlugin())
VMdPreview.use(createTodoListPlugin())
VMdPreview.use(createAlignPlugin())

createApp(App).use(VMdPreview).mount('#app')
